<template>
    <div class="box">
        <!-- 头部 -->
        <div class="header_box">
            <van-icon class="icon" name="arrow-left" @click="back" />
            <span>签订合同</span>
        </div>

        <!-- 内容 -->
        <div class="content_box">
            <div class="content">
                <div class="remind">
                    <span>恭喜您！您的开店申请已经通过线下审核。</span>
                    <br>
                    <span>请继续完成最后的合同签订工作，以便您能正式在平台上开店营业。</span>
                </div>
            </div>
            <div class="content">
                <div class="download">
                    <p>请下载打印小默外卖商家签约合同，填写完整并加盖企业公章后拍照上传。</p>
                    <van-button color="#ff6e53" class="dow_btn">下载合同</van-button>
                </div>
            </div>
            <!-- 上传营业执照 -->
            <div class="content i1">
                <div class="contract_img">
                    <van-uploader v-model="fileList" multiple max-count="1" upload-text="点击上传" preview-size="220px" />
                    <p>合同照片</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileList:[]
        }
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        
    }
}
</script>

<style scoped>
/* 头部 */
.header_box {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    background-color: rgba(255, 110, 83, 1);
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 17px;
    color: aliceblue;
}

.icon {
    width: 16%;
    padding-left: 20px;
}

.header_box :last-child {
    width: 90%;
    padding-left: 25%;
}

/* 内容 */
.content_box {
    width: 100%;
    padding-top: 12%;
    height: 667px;
    background-color: #f5f5f5;
    padding-bottom: 10px;
}

.content {
    width: 100%;
    margin: 15px 0;
    background-color: #ffff;
}

.content div {
    padding: 10px 0;
    width: 90%;
    margin: 0 auto;
    font-size: 14px;
}

.remind span {
    color: #a1a1a1;
}

/* 下载合同 */
.download {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.download p {
    width: 60%;
}

.dow_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    width: 96px;
    height: 35px;
}
/* 上传合同照片 */
.i1{
    text-align: center;
}
.contract_img{
    width: 100%;
    margin: 0 auto;
}
</style>